<template>
  <body>
    <div class="header">
      <div class="head"></div>
      <identification class="user-card"></identification>
      <show-card class="cards"></show-card>
    </div>

    <div class="container">
      <luo-forum></luo-forum>
      <div class="bar"></div>
    </div>
  </body>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
} from "vue";
import LuoForum from "@/views/forum/LuoForum.vue";
import ShowCard from "@/components/layouts/ShowCard.vue";
import Identification from "@/components/layouts/Identification.vue";
import { HttpManager } from "@/api";
import { useStore } from "vuex";
import { Search } from "@element-plus/icons-vue";

export default defineComponent({
  components: {
    Identification,
    LuoForum,
    ShowCard,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    return {};
  },
});
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cards {
  display: flex;
  justify-content: center;
  margin-top: 200px;
  margin-bottom: 30px;
}
body {
  height: 100%;
  background-color: #e9ebec;
  display: flex;
  flex-direction: column;
}
.bar {
  padding-bottom: 100px;
}
.head {
  width: 100%;
  height: 400px;
  background-image: url("~@/assets/images/lingbomen.jpg") !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-card {
  position: absolute;
  transform: translateY(55%);
  margin-left: auto;
  margin-right: auto;
}

.kenburns-top-left {
  -webkit-animation: kenburns-top-left 3s ease-out both;
  animation: kenburns-top-left 5s ease-out both;
}
@-webkit-keyframes kenburns-top-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
    transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
    transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
}
@keyframes kenburns-top-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
    transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
    transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
}
</style>
